<template>
  <div class="index-container-ty">
    <a-spin :spinning="loading">
      <a-row 
        type="flex"
        justify="start"
        :gutter="3">
        <a-col
          :span="24"
          >
          <a-card>
            <div class="index-md-title" slot="title">
              <div>
                <!-- <img :src="icon" /> -->
                总体运营指标
              </div>
            </div>
            <a-table
              :class="'my-index-table tytable1'"
              ref="table"
              size="small"
              rowKey="id"
              :columns="columns"
              :dataSource="dataSource"
              :pagination="false">
              <template slot="dayWarnning" slot-scope="text,record">
                <span>{{text}}</span>
                <a-icon type="bulb" theme="twoTone" style="font-size:22px;" :twoToneColor="getTipColor(record)"/>
              </template>
            </a-table>
          </a-card>
        </a-col>
      </a-row>
    </a-spin>
  </div>
</template>

<script>
  const tempSs=[{
    id:"001",
    indexName:"参配率",
    realData: "0%",
    referData: "75%",
    sign: ""
  },{
    id:"002",
    indexName:"受胎率",
    realData: "0%",
    referData: "75%",
    sign: ""
  },{
    id:"003",
    indexName:"空怀率",
    realData: "0%",
    referData: "75%",
    sign: ""
  },{
    id:"004",
    indexName:"流产率",
    realData: "0%",
    referData: "75%",
    sign: ""
  },{
    id:"005",
    indexName:"胎间距",
    realData: "0%",
    referData: "75%",
    sign: ""
  },{
    id:"006",
    indexName:"初产月龄",
    realData: "100%",
    referData: "75%",
    sign: ""
  }]
  //正常
  const tip_green = "rgba(0, 255, 0, 1)"
  //偏低
  const tip_red = "rgba(255, 0, 0, 1)"
export default {
  name: "Operator",
  data () {
    return {
        loading:false,
        textMaxLength:8,
        title:"",
        dataSource:[],
        icon: require("@/assets/home/菜单.png"),
        tableRef:"",
        tablesRef:["table"],
        columns: [
          {
            title:'指标名',
            align:"center",
            dataIndex: 'indexName',
            width:80
          },
          {
            title:'实际值',
            align:"center",
            dataIndex: 'realData',
          },
          {
            title:'参考值',
            align:"center",
            dataIndex: 'referData',
          },
          {
            title:'标志',
            align:"center",
            dataIndex: 'sign',
            scopedSlots: {customRender: "dayWarnning"}
          },
        ]
      }
  },
  created() {
    this.init();
  },
  methods: {
    changeTable() {
      this.dataSource = tempSs
      this.tableRef = this.tablesRef[0]
    },
    getTipColor(rd){
        let realData = rd.realData.replace("%","")
        let referData = rd.referData.replace("%","")
        if(Number(realData)  < Number(referData)){
          rd.sign = "偏低"
          return tip_red
        }else{
          rd.sign = "正常"
          return tip_green
        }
      },
      init(){
        this.dataSource = tempSs
        this.tableRef = this.tablesRef[0]
      },
  }
  
}
</script>
<style scoped>
  .my-index-table{height:306px}
  .my-index-table table{font-size: 14px !important;}
  .index-container-ty{margin-top: 0px;}
  .index-container-ty .ant-card-head-title{padding-top: 6px;padding-bottom: 6px;}
  .index-container-ty .ant-card-extra{padding:0}
  .index-container-ty .ant-card-extra a{color:#fff}
  .index-container-ty .ant-card-extra a:hover{color:#152ede}
  .index-container-ty .ant-card-head-wrapper,.index-container-ty .ant-card-head{
    line-height:24px;
    min-height:24px;
    /*background: #90aeff;*/
    background: #7196fb;
  }
  .index-container-ty .ant-card-body{padding: 10px 12px 0px 12px}
  .index-container-ty .ant-table-footer{text-align: right;padding:6px 12px 6px 6px;background: #fff;border-top: 2px solid #f7f1f1;}

  .index-md-title{
    postion:relative;
    /* padding-left:24px; */
    width: 100%;
    color: #707070;
    font-size: 21px;
    font-family: cursive;
  }
  .index-md-title img{
    position: absolute;
    height:32px;
    top: 2px;
    left:14px;
  }

  .index-container-ty .ant-card-body{
    /*border-left:1px solid #90aeff;
    /*border-right:1px solid #90aeff;
    border-bottom:1px solid #90aeff;*/
  }


  .index-container-ty .ant-table-thead > tr > th,
  .index-container-ty .ant-table-tbody > tr > td{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-left > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th,
  .index-container-ty .ant-table-small > .ant-table-content > .ant-table-fixed-right > .ant-table-body-outer > .ant-table-body-inner > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty  .ant-table-small > .ant-table-content > .ant-table-scroll > .ant-table-body > table > .ant-table-thead > tr > th{
    border-bottom: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-small{
    border: 1px solid #90aeff;
  }

  .index-container-ty .ant-table-placeholder {
    padding: 0
  }
</style>